<template>
    <div class="wrap">
        <!-- 轮播图 -->
        <mt-swipe :auto="4000">
        <!-- 绑定轮播图数据 -->
        <mt-swipe-item v-for="(item,index) in getlunbotu" :key="index">
            <img :src="item.img" alt=""> 
        </mt-swipe-item>
        </mt-swipe>

        <!-- 动态 -->
        <div class="dynamic-box">
            <div class="dynamic-top dongtai">
                <span class="dynamic">动态</span>
                <span class="discount">最新优惠打8折！</span>
                <!-- <marquee behavior="scroll" direction="left" scrollamount="2" class="discount">最新优惠打8折！</marquee> -->
            </div>
            <div class="dynamic-list">
                <div class="dynamic-item">
                    <router-link to="/home/doctorDynamic">
                           <div class="pic">
                                <img src="../../images/icon_05.png" alt="">
                            </div>
                            <div class="dynamic-right">
                                <p>名医动态</p>
                                <p>名医提醒,实时关注您的健康</p>
                            </div>
                    </router-link>
                 
                </div>
                <div class="dynamic-item">
                    <router-link to="/home/answers">
                           <div class="pic">
                                <img src="../../images/icon_06.png" alt="">
                            </div>
                            <div class="dynamic-right">
                                <p>在线问答</p>
                                <p>名医提醒,实时关注您的健康</p>
                            </div>
                    </router-link>
                 
                </div>
                <div class="dynamic-item">
                    <router-link to="">
                           <div class="pic">
                                <img src="../../images/icon_07.png" alt="">
                            </div>
                            <div class="dynamic-right">
                                <p>月嫂风采</p>
                                <p>名医提醒,实时关注您的健康</p>
                            </div>
                    </router-link>
                 
                </div>
                <div class="dynamic-item">
                    <!-- <router-link to="">
                           <div class="pic">
                                <img src="../../images/icon_08.png" alt="">
                            </div>
                            <div class="dynamic-right">
                                <p>在线商城</p>
                                <p>名医提醒,实时关注您的健康</p>
                            </div>
                    </router-link> -->

                      <a href="http://www.beibei.com/">
                           <div class="pic">
                                <img src="../../images/icon_08.png" alt="">
                            </div>
                            <div class="dynamic-right">
                                <p>在线商城</p>
                                <p>名医提醒,实时关注您的健康</p>
                            </div>
                    </a>
                 
                </div>
            </div>
        </div>
        <!-- 今日推荐 -->
        <div class="recommend-box">
             <div class="dynamic-top">
                <span class="dynamic tuijian">今日推荐</span>
            </div>
            <!-- 轮播图组件-->
                 <div class="swiper-container">
                 <div class="picture">
                    <img src="../../images/img_bg_01.png" alt="">
                    <span class="position">{{ position }}</span>
                  </div>
                <div class="swiper-wrapper">
                 
                  <div class="swiper-slide">
                    <ul>
                      <li><img src="../../images/img_01.png" alt=""><p>李医生</p></li>
                      <li><img src="../../images/img_01.png" alt=""><p>李医生</p></li>
                      <li><img src="../../images/img_01.png" alt=""><p>李医生</p></li>
                    </ul>

                  </div>
                <div class="swiper-slide">
                     <ul>
                      <li><img src="../../images/img_02.png" alt=""><p>月嫂</p></li>
                      <li><img src="../../images/img_02.png" alt=""><p>月嫂</p></li>
                      <li><img src="../../images/img_02.png" alt=""><p>月嫂</p></li>
                    </ul>
                  </div>
                  <div class="swiper-slide">
                     <ul>
                      <li v-for="item in steward" :key="item.id" @click="onSteward(item.id)">
                        <img :src="item.img_url" alt="">
                        <p>{{item.user}}</p>
                      </li>
                     
                    </ul>
                  </div>
                </div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev" @click="pagechange(-1)"></div>
                    <div class="swiper-button-next" @click="pagechange(1)"></div>
                     <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                     <!-- 如果需要滚动条 -->
                    <!-- <div class="swiper-scrollbar"></div> -->
                    
                 </div>
        </div>

        <!-- 精品套餐 -->
        <div class="high-quality">
          <div class="dynamic-top">
                <span class="dynamic taocan">精品套餐</span>
            </div>
            <div class="quality-list">
              <div class="quality-item">
                <div class="pic">
                  <img src="../../images/img_04.png" alt="">
                </div>
                <div class="quality-right">
                  <p class="quality-title"><span>套餐名称</span><span class="price">¥2155元</span></p>
                  <p>套餐内容套餐内容套餐内容套餐内容套餐内容套餐内容套餐内容套餐内容</p>
                  <p class="buy-box"><span class="buy_now">立即购买</span></p>
                </div>
              </div>
            </div>
        </div>

     
      <!-- 底部导航栏 -->
       <Tabbar/>
    </div>
</template>
<script>
//全局定义页码数
var page = 0;
//导入公共组件 tabbar.vue
import Tabbar from "../comments/tabbar.vue";
// import Lunbo from '../comments/lunbo.vue'
// import 'swiper/dist/js/swiper.jquery.js'
// import 'swiper/dist/js/swiper.min.js'
import $ from "jquery";
export default {
  data() {
    return {
      page: 0,
      getlunbotu: [
        //后台传过来的数据放到这里 好渲染到页面上
        { img: "http://img95.699pic.com/photo/00056/5387.jpg_wh300.jpg" },
        { img: "http://img95.699pic.com/photo/50014/2529.jpg_wh300.jpg" },
        { img: "http://img95.699pic.com/photo/50081/7049.jpg_wh300.jpg" }
      ],
      //管家数据
      steward: [
        { id: 1, img_url: "/images/img_03.png", user: "李管家" },
        { id: 2, img_url: "/images/img_02.png", user: "郑管家" },
        { id: 3, img_url: "/images/img_01.png", user: "萧管家" }
      ]
    };
  },
  mounted() {
    //因为dom渲染完成才能初始化Swiper，所以必须将初始化放入vue的生命周期钩子函数mounted中
    new Swiper(".swiper-container", {
      pagination: ".swiper-pagination", //分页器
      autoplay: 50000, //自动播放时间
      loop: false, //环路
      indicatorDots: true, //是否显示小圆点
      prevButton: ".swiper-button-prev",
      nextButton: ".swiper-button-next"
    });
  },
  created() {
    this.pagechange();
  },
  methods: {
    //动态切换数据
    pagechange(data) {
      if (data == 1 && this.page < 3) {
        this.page++;
      } else if (data == -1 && this.page > 0) {
        this.page--;
      } else {
        console.log("参数错误");
      }

      // if (data == "+") {
      //   if (this.page < 3) {
      //     this.page++;
      //     // this.changeTtpe();
      //   }
      // } else if (data == "-") {
      //   if (this.page > 1) {
      //     this.page--;
      //     // this.changeTtpe();
      //   }
      // } else {
      //   console.log("参数错误");
      // }
    },
    // changeTtpe() {
    // if (page == 1) {
    //   $(".position").text("上医");
    // } else if (page == 2) {
    //   $(".position").text("月嫂");
    // } else if (page == 3) {
    //   $(".position").text("管家");
    // }
    // },
    //跳转到管家推荐
    onSteward(id) {
      this.$router.push("/steward/steward-detail/" + id);
    }
  },
  computed: {
    position() {
      const list = ["上医", "月嫂", "管家"];
      return list[this.page];
    }
  },
  components: {
    Tabbar: Tabbar
  }
};
</script>
<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  background-color: #dacfcf8a !important;
}
.mint-swipe {
  height: 150px;
}
.mint-swipe-item img {
  width: 100%;
  height: 100%;
}
.mui-media-body {
  font-size: 13px !important;
}
.dynamic-top {
  padding: 5px 10px;
  background-color: #fff;
  font-size: 14px;
}
.dynamic {
  font-weight: 700;
  margin-left: 10px;
}
.dynamic-box .dongtai {
  margin: 0;
}
.dynamic::before {
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  background: url(../../images/icon_02.png) no-repeat;
  background-size: 15px 15px;
  float: left;
  margin-top: 3px;
}
.dynamic-top {
  border-bottom: 1px solid #ccc;
  margin-top: 10px;
}
.discount {
  margin-left: 10px;
}
.dynamic-item a {
  display: flex;
}
.dynamic-item a img {
  width: 58px;
  height: 58px;
}
.dynamic-list {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 5px 5px 5px;
}
.dynamic-item {
  width: 49%;
  background-color: #ffc0cb54;
  border-radius: 5px;
  margin-top: 5px;
  padding: 6px;
}
.recommend-box {
  margin-top: 10px;
}
.dynamic-right {
  margin-left: 5px;
}
.dynamic-right p {
  font-size: 12px;
  margin: 0;
}
.swiper-container {
  width: 100%;
  height: 150px;
  background-color: #fff;
}
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 58%;
  width: 28px;
  height: 15px;
}
.swiper-container .picture img {
  width: 100%;
  height: 20px;
}
.picture {
  position: relative;
  margin-top: 5px;
  padding: 0 30px;
}
.picture span {
  position: absolute;
  top: 0;
  left: 47%;
  color: #fff;
  font-size: 10px;
}
ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 40px;
}
.swiper-slide ul li {
  text-align: center;
}
.swiper-slide ul li img {
  width: 40px;
  height: 40px;
}
.quality-item {
  display: flex;
  padding: 10px;
  background-color: #fff;
}
.quality-item .pic img {
  width: 50px;
  height: 50px;
}
.quality-right {
  width: 100%;
  margin-left: 10px;
}
.quality-right p {
  margin: 0;
  font-size: 10px;
}
.quality-title {
  display: flex;
  justify-content: space-between;
}
.quality-title .price {
  color: red;
}
.buy_now {
  float: right;
  padding: 0px 4px;
  background-color: red;
  color: #fff;
  border-radius: 5px;
}
.quality-list {
  margin-bottom: 50px;
}
.tuijian::before {
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  background: url(../../images/icon_03.png) no-repeat;
  background-size: 15px 15px;
  float: left;
  margin-top: 3px;
}
.taocan::before {
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  background: url(../../images/icon_04.png) no-repeat;
  background-size: 15px 15px;
  float: left;
  margin-top: 3px;
}
.dynamic-right p:first-child {
  font-weight: 700;
  color: #000000a1;
}
</style>